<template>
  <div class="search">
    <headerPhoto class="search-header">
      <div class="search">
        <input @keyup.enter="getSearchDataFn" v-model="message" type="text" placeholder="请输入想要搜索的文章">
        <i @click="getSearchDataFn" class="bi bi-search text-light"></i>
      </div>
      <div class=" history d-flex">
        <div v-for="(item, index) in historyArr" :key="index" class="box">
          <span @click="clickHistoryFn(item)" class="me-1">{{ item }}</span>
          <i @click="delHistoryFn(index)" class="bi bi-backspace-fill"></i>
        </div>
      </div>
    </headerPhoto>
    <div class="container pt-3">
      <ListItem :articleArr=articleArr />
    </div>
  </div>
</template>

<script setup lang="ts">
import headerPhoto from "@/component/headerPhoto.vue";
import ListItem from "@/component/ListItem.vue";
import { getSearchData } from "@/api/index"
import { ref } from "vue";
import { Toast } from "vant";
import { ElMessage } from 'element-plus'

const message = ref<string>('');

interface IArticle {
  [key: string | number]: string | number
}
// 文章列表数组
const articleArr = ref<IArticle[]>([])

const historyArr = ref<string[]>([]);

if (localStorage.getItem('history')) {
  historyArr.value = JSON.parse(localStorage.getItem('history') || '[]')
}
const getSearchDataFn = async () => {
  if (!message.value) {
    ElMessage({
      message: '你还没输入呢~~',
      type: 'warning',
      plain: true,
      offset: 100
    })
    return false
  }
  getHistoryFn()
  Toast.loading({
    message: '搜索中...'
  });
  await getSearchData({ keyword: message.value })
    .then(
      res => {
        // console.log(res.data)
        if (res.data.result) {
          articleArr.value = res.data.result;
          if (res.data.result.length == 0) {
            ElMessage({
              message: '暂无搜索结果~~',
              type: 'error',
              plain: true,
              offset: 100
            })
          }
          message.value = ''
        }
      },
      err => {
        console.log(err)
      }
    ).finally(() => {
      Toast.clear()
    })
}

// 添加历史记录
const getHistoryFn = () => {
  if (!message.value) return false
  const index = historyArr.value.indexOf(message.value);
  if (index != -1) {
    historyArr.value.splice(index, 1)
  }
  historyArr.value.push(message.value)
  if (historyArr.value.length > 5) {
    historyArr.value.shift()
  }
  localStorage.setItem('history', JSON.stringify(historyArr.value))
  // console.log(historyArr.value)
}

// 删除历史记录
const delHistoryFn = (index: number) => {
  // console.log(index)
  historyArr.value.splice(index, 1);
  localStorage.setItem('history', JSON.stringify(historyArr.value))
}
// 点击历史记录搜索
const clickHistoryFn = (item: string) => {
  message.value = item
  getHistoryFn()
  getSearchDataFn()
}

</script>

<style lang="less" scoped>
.search-header {
  .search {
    width: 300px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #d6fe67;
    border-radius: 20px;

    input {
      width: calc(100% - 40px);
      height: 100%;
      border-radius: 15px;
      border: none;
      outline: none;
      padding-left: 15px;
      background-color: transparent;
      color: #fff;

      &::-webkit-input-placeholder {
        color: rgb(255, 255, 255);
      }
    }

    i {
      display: block;
      width: 30px;
      height: 30px;
      font-size: 18px;
      background-size: cover;
    }
  }

  .history {
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;

    .box {
      color: #4790f7;
      background-color: #fff;
      margin: 10px 5px 0;
      padding: 0 5px;
      border-radius: 7px;
      font-size: 15px;

      span {
        cursor: pointer;
        vertical-align: middle;
      }

      i {
        &:hover {
          cursor: pointer;
          color: rgb(249, 114, 114);
        }
      }
    }
  }
}
</style>
